<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<template #top>
			<view class="ranking-header">
				<!-- 类型筛选 -->
				<view class="ranking-menu-box">
					<uv-tabs :list="menuList" :activeStyle="{color:'#5F56EF',fontSize:'32rpx'}" :inactiveStyle="{color:'#666666',fontSize:'32rpx'}" :itemStyle="{height:'80rpx'}" lineColor="#5F56EF" @click="didSelectItem"></uv-tabs>
				</view>
				<!-- 搜索框 -->
				<view class="ranking-search-box">
					<xh-search-bar placeholder="输入代理商名称或手机号" v-model="keywords" @searchResult="searchResult"></xh-search-bar>
				</view>
			</view>
		</template>
		<!-- 列表 -->
		<view class="ranking-list">
			<view class="ranking-list-item" v-for="item in dataList" :key="item.agentId">
				<image src="/static/operate/agent_photo.png" mode="aspectFit"></image>
				<view class="ranking-list-item-info">
					<text>{{item.agentName}}</text>
					<view class="ranking-list-item-money-box">
						<text>{{selectItem.name}}</text>
						<text>{{getCount(item)}}</text>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import { ref } from 'vue'
	import { getRankingList } from '@/common/api/api.js'
	// 分类菜单
	const menuList = ref([{ name: '总商户', type: 5 }, { name: '上月新增', type: 6 }, { name: '本月新增', type: 7 }])
	const selectItem = ref(menuList.value[0])
	const pagingRef = ref(null)
	const dataList = ref([])
	const keywords = ref('')
	// 选择分类菜单
	const didSelectItem = (item) => {
		console.log(item)
		selectItem.value = item
		pagingRef.value.reload()
	}
	// 搜索结果回调
	const searchResult = () => {
		pagingRef.value.reload()
	}
	// 处理数量显示
	const getCount = (item) => {
		if (item.rankType == 5) {
			return item.merTotal
		} else if (item.rankType == 6) {
			return item.lastMerTotal
		} else if (item.rankType == 7) {
			return item.thisMerTotal
		}
		return 0
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		if (uni.$uv.test.mobile(keywords.value)) {
			params.phoneNo = keywords.value
		} else {
			if (!uni.$uv.test.empty(keywords.value)) {
				params.agentName = keywords.value
			}
		}
		params.collectType = selectItem.value.type
		const res = await getRankingList(params, pageNo)
		const list = res.result
		if (pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value, ...list]
		dataList.value.forEach(item => {
			item.rankType = selectItem.value.type
		})
		pagingRef.value.completeByTotal(list, res.page.totalElements)
	}
</script>

<style lang="scss" scoped>
	.ranking-menu-box {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.ranking-search-box {
		padding: 20rpx 30rpx;
	}

	.ranking-list {
		padding-bottom: 20rpx;

		.ranking-list-item {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin: 0 30rpx 20rpx;

			image {
				width: 96rpx;
				height: 96rpx;
			}

			.ranking-list-item-info {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.ranking-list-item-money-box {
					font-size: 26rpx;
					margin-top: 10rpx;

					text:nth-child(2) {
						font-size: 28rpx;
						margin-left: 20rpx;
						color: $xh-orange-color;
					}
				}
			}
		}
	}
</style>